import React from 'react'
import {Row,Col} from 'antd'
import './index.less'
import Util from '../../utils/util'
import axios from '../../axios/index'
export default class Header extends React.Component{
state={};
    //生命周期函数
    componentWillMount(){
        this.setState({
            username:"李磊"
        });
        setInterval(()=>{
         let systime =  Util.formateDate(new Date().getTime());
            this.setState({
                systime
            })
        },1000);
        this.getWeatherAPIData();
}
     getWeatherAPIData(){
        let city ='北京'
       axios.jsonp({
           url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
       }).then((res)=>{
            if(res.status==='success'){
                      let data =res.results[0].weather_data[0];
                      this.setState({
                        dayPictureUrl:data.dayPictureUrl,
                        weather:data.weather
                      })
            }
       }).catch()
}
    render(){
        return(
            <div className="header" >
              <Row className="header-top">
                  <Col span={24}>
                      <span>欢迎，{this.state.username}</span>
                      <a href="#">退出</a>
                  </Col>
              </Row>
                <Row className="breadcrumb">
                    <Col span={4} className="breadcrumb-title">
                        首页
                    </Col>
                    <Col span={20} className="weather">
                           <span className="date">{this.state.systime}</span>
                     <span className="weather-detail">
                         <img src={this.state.dayPictureUrl} alt=""/>
                         {this.state.weather}
                     </span>
                    </Col>
                </Row>
            </div>
        )
    }
}